<template>
  <div
    class="_wrapper _cart _abs-c-two _radius-5p _over-hidden _wrapper _flex-y _flex-a-stretch"
  >
    <div class="_font-title _background-2 _p10">基站坐标信息更新</div>
    <div class="_p5 _p-b-10 _wrapper _flex-y _flex-item-1">
      <div class="_flex _m-t-10 _flex-space-x _wrapper-x">
        <el-input v-model="currPhone" placeholder="请输入您的手机号"></el-input>
        <el-button type="primary" @click="querySiteDict()">查询</el-button>
      </div>
      <div
        class="_flex _m-t-10 _flex-space-x _wrapper-x"
        v-if="siteDict.length > 0"
      >
        <com-select v-model="siteMn" :dictList="siteDict"></com-select>
        <el-button type="primary" @click="checkSiteInfo()">确认</el-button>
      </div>
      <div class="_flex _m-t-10 _flex-space-x _wrapper-x" v-else>
        <el-input v-model="siteMn" placeholder="请输入基站编号"></el-input>
        <el-button type="primary" @click="checkSiteInfo()">确认</el-button>
      </div>
      <div class="_flex _m-t-10 _flex-space-x _wrapper-x _font" v-if="siteInfo">
        <div>基站名称：{{ siteInfo.site_name }}</div>
      </div>
      <div
        class="_m-t-10 _over-hidden _p-l-5 _p-r-5 _wrapper-x _rel _flex-item-1"
      >
        <com-map-baidu
          ref="ref-com-map-baidu"
          @mapClick="mapClick"
        ></com-map-baidu>
      </div>
      <div class="_flex _m-t-10 _flex-space-x _wrapper-x">
        <el-input v-model="lat" placeholder="请输入经度"></el-input>
        <el-input v-model="lng" placeholder="请输入纬度"></el-input>
        <el-button type="primary" @click="getCurrPosition()">定位</el-button>
      </div>
      <div class="_flex _m-t-10 _flex-space-x _wrapper-x">
        <el-input v-model="code" placeholder="请输入校验码"></el-input>
        <el-button v-if="!isSend" type="primary" @click="sendSmsCode()"
          >发送</el-button
        >
        <el-button v-else type="primary" disabled="true">送达</el-button>
      </div>
      <div v-if="omUser" class="_p5 _text-a-r _font-hint _wrapper-x">
        校验主管:{{ omUser.real_name }}({{ omUser.phone }})
      </div>
      <div class="_flex _m-t-10 _flex-space-x _wrapper-x">
        <el-button type="primary" class="_wrapper-x" @click="submitInfo()"
          >确认更新操作</el-button
        >
      </div>
    </div>
  </div>
</template>
<script>
import ComMapBaidu from "@/components/com-map-baidu/com-map-baidu.vue";
import ComSelect from "@/components/com-select/com-select.vue";
import toolAction from "@/tool/http/tool-action";

let siteInfoApi = toolAction.init(
  "site_info",
  "cc3ac1352b104abfb86da5c351f8f68c"
);

let omUserApi = toolAction.init("om_user", "cc3ac1352b104abfb86da5c351f8f68c");

export default {
  components: { ComMapBaidu, ComSelect },
  data() {
    return {
      currPhone: "",
      siteMn: "",
      lat: "",
      lng: "",
      code: "",
      siteInfo: undefined,
      omUser: undefined,
      isSend: false,
      siteDict: [],
    };
  },
  mounted() {
    this.siteMn = this.$route.query.mn || "";
    this.lat = this.$route.query.lat || "";
    this.lng = this.$route.query.lng || "";
    this.checkSiteInfo();
  },
  methods: {
    async querySiteDict() {
      if (!this.currPhone) {
        return this.$element.msg("请先输入您的手机号", "error");
      }
      let omUsers = await omUserApi.list({
        rules: {
          phone__eq: this.currPhone,
        },
      });
      if (omUsers.length > 0) {
        this.siteDict = (
          await siteInfoApi.list({
            rules: {
              om_user_id__in: omUsers.map((r) => r.id),
            },
          })
        ).map((res) => ({ name: res.site_name, val: res.mn }));
      }
    },
    checkSiteInfo() {
      siteInfoApi
        .list({
          rules: {
            mn__eq: this.siteMn,
          },
        })
        .then((res) => {
          if (res.length > 0) {
            this.siteInfo = res[0];
            this.initOmUserInfo(this.siteInfo.om_dept_id);
          }
        });
    },
    initOmUserInfo(om_dept_id) {
      omUserApi
        .list({
          rules: {
            om_dept_id__eq: om_dept_id,
            is_leader__eq: 1,
          },
        })
        .then((res) => {
          if (res.length > 0) {
            this.omUser = res[0];
          }
        });
    },
    async getCurrPosition() {
      let point = await this.$refs["ref-com-map-baidu"].getCurrPosition();
      this.lat = point.lat;
      this.lng = point.lng;
    },
    mapClick(data) {
      this.$refs["ref-com-map-baidu"].clear();
      this.lat = data.latlng.lat.toFixed(5);
      this.lng = data.latlng.lng.toFixed(5);
      this.$refs["ref-com-map-baidu"].addMarker({ x: this.lng, y: this.lat });
    },
    sendSmsCode() {
      if (!this.siteInfo) {
        return this.$element.msg("请先确认基站信息", "error");
      }
      if (!this.lat || !this.lng) {
        return this.$element.msg("请先确认坐标信息", "error");
      }
      toolAction.run("fm-site-om-sms-code", this.siteMn).then(() => {
        this.$element.msg();
        this.isSend = true;
        setTimeout(() => {
          this.isSend = false;
        }, 60 * 1000);
      });
    },
    submitInfo() {
      if (!this.siteInfo) {
        return this.$element.msg("请先确认基站信息", "error");
      }
      if (!this.lat || !this.lng) {
        return this.$element.msg("请先确认坐标信息", "error");
      }
      if (!this.code) {
        return this.$element.msg("请先输入校验码", "error");
      }
      toolAction
        .run("fm-site-sync-pos-info", this.siteMn, {
          code: this.code,
          lat: this.lat,
          lng: this.lng,
        })
        .then(() => {
          this.$element.msg("基站坐标信息更新成功！");
        });
    },
  },
};
</script>
<style lang=""></style>
